import 'package:flutter/material.dart';

/**
 * Tabview
 * 1,with SingleTickerProviderStateMixin
 * 2.定义TabController
 * 3.appbar - bottom
 * 4.bottom - tabs
 * 5.body tabbarview
 */
class TabBarViewDemo extends StatefulWidget {
  const TabBarViewDemo({super.key});

  @override
  State<StatefulWidget> createState() {
    return _TabBarViewDemoState();
  }
}

/**
 * 使用tabview实现SingleTickerProviderStateMixin
 */
class _TabBarViewDemoState extends State<TabBarViewDemo>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  List<String> _list = [];

  //生命周期函数：当组件初始化的时候就会出发
  @override
  void initState() {
    super.initState();
    //给TabController赋值
    _tabController = TabController(length: 9, vsync: this);
    _tabController.addListener(() {
      if (_tabController.animation!.value == _tabController.index) {
        print(_tabController.index);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //左侧按钮图标
        leading: IconButton(onPressed: () {}, icon: Icon(Icons.search)),
        //导航背景颜色
        backgroundColor: Colors.red,
        title: Text('Flutter App Tabview'),
        //右侧按钮
        actions: [
          IconButton(onPressed: () {}, icon: Icon(Icons.home)),
          IconButton(onPressed: () {}, icon: Icon(Icons.data_array)),
        ],
        bottom: TabBar(
          //注意：配置controller需要去掉TabBar上面的const
          controller: _tabController,
          //是否可滑动
          isScrollable: true,
          //指示器颜色
          indicatorColor: Colors.green,
          //指示器线条高度
          indicatorWeight: 20,
          //底部指示器的padding
          indicatorPadding: EdgeInsets.all(5),
          //label指示器长度和文案相同 默认tab
          indicatorSize: TabBarIndicatorSize.tab,
          //选中字体颜色
          labelColor: Colors.yellow,
          unselectedLabelColor: Colors.deepPurple,
          labelStyle: TextStyle(fontSize: 20),
          unselectedLabelStyle: TextStyle(fontSize: 15),

          //选中的背景
          indicator: BoxDecoration(
              color: Colors.blue, borderRadius: BorderRadius.circular(0)),
          tabs: const [
            Tab(child: Text('关注1')),
            Tab(child: Text('电影2')),
            Tab(child: Text('视频3')),
            Tab(child: Text('关注4')),
            Tab(child: Text('电影5')),
            Tab(child: Text('视频6')),
            Tab(child: Text('视频7')),
            Tab(child: Text('视频8')),
            Tab(child: Text('视频9')),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          ListView(
            children: [
              ListTile(title: Text('我是关注列表1')),
            ],
          ),
          ListView(
            children: [
              ListTile(title: Text('我是电影列表2')),
            ],
          ),
          ListView(
            children: [
              ListTile(title: Text('我是关注列表3')),
            ],
          ),
          ListView(
            children: [
              ListTile(title: Text('我是关注列表4')),
            ],
          ),
          ListView(
            children: [
              ListTile(title: Text('我是关注列表5')),
            ],
          ),
          ListView(
            children: [
              ListTile(title: Text('我是关注列表6')),
            ],
          ),
          ListView(
            children: [
              ListTile(title: Text('我是关注列表7')),
            ],
          ),
          ListView(
            children: [
              ListTile(title: Text('我是关注列表8')),
            ],
          ),
          ListView(
            children: [
              ListTile(title: Text('我是关注列表9')),
            ],
          ),
        ],
      ),
    );
  }
}
